<template>
  <div class="pay">
    <section class="pay-header">
      <shop-header :title="'订单配送至'">
        <p slot="pic-group" class="none"></p>
      </shop-header>
      <div class="delivery">
        <p>{{location}}<img class="right_arrow" src="../../static/img/right_arrow.png"/></p>
        <span>奥特曼（先生）1881925****</span>
      </div>
    </section>
    <div class="order">
      <scroll>
        <section>
          <ul class="order-content">
            <li class="order-header">
              <p>尽快送达[预约时间为15:30]</p>
              <i>></i>
            </li>
            <li class="order-detail">
              <div class="order-detail-header">
                <p>云健康之家大药房</p>
                <i>></i>
              </div>
              <ul class="order-list">
                <li class="list" v-for="item in foodSelected">
                  <img class="pic" src="../../static/img/shop-img.jpeg"/>
                  <div class="content">
                    <p>{{item.name}}</p>
                    <span class="num-price"><span class="num">×{{item.count}}</span><span class="price">{{item.count*item.price | currency('￥')}}</span></span>
                  </div>
                </li>
              </ul>
              <div class="order-detail-footer">
                <span></span>
                <p class="total">
                  <span>合计</span>
                  <span class="totalprice">{{totalPrice | currency('￥')}}</span>
                </p>
                <a class="but" @click="toPayment">去支付</a>
              </div>
            </li>
          </ul>
        </section>
      </scroll>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
    import ShopHeader from "./shop/children/shop-header";
    import Scroll from "../components/scroll/scroll";
    import {mapGetters} from 'vuex'

    export default {
      components: {
        Scroll,
        ShopHeader},
      name: "pay",
      data () {
        return {
          foodSelected: []
        }
      },
      mounted () {
        setTimeout(() => {
          this.getSelectedfoods()
        }, 20)
      },
      methods: {
        getSelectedfoods () {
          let selectedFoods = window.localStorage.getItem('selectedFoods')
          this.foodSelected = JSON.parse(selectedFoods)
        },
        toPayment () {
          this.$router.push('/payment')
        }
      },
      computed: {
        totalPrice () {
          let total = 0
          if (!this.foodSelected) {
            return
          }
          this.foodSelected.forEach((food) => {
            total += food.count*food.price
          })
          return total
        },
        ...mapGetters([
          'location'
        ])
      },
      watch: {
        '$route': 'getSelectedfoods'
      }
    }
</script>

<style scoped>
  .pay{
    background-color: #f5f5f5;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .pay .pay-header{
    background: -o-linear-gradient(bottom right, rgba(95, 139, 247,1), rgba(95, 194, 249, 1));
    background: -moz-linear-gradient(bottom right, rgba(95, 139, 247,1), rgba(95, 194, 249, 1));
    background: linear-gradient(to bottom right, rgba(95, 139, 247,1), rgba(95, 194, 249, 1));
  }
  .pay .pay-header .none{
    height: 34px;/*rem*/
    width: 34px;/*rem*/
    margin-left: 36px;
  }
  .pay .pay-header .delivery{
    padding-bottom: 30px;/*rem*/
  }
  .pay .pay-header .delivery p{
    color: #ffffff;
    font-size: 28px;/*px*/
    text-align: center;
  }
  .pay .pay-header .delivery span{
    font-size: 24px;/*px*/
    display: block;
    color: #e9f5fe;
    text-align: center;
  }
  .pay .pay-header .delivery .right_arrow{
    height: 24px;/*rem*/
    width: 24px;/*rem*/
  }
  .pay .order{
    margin: 14px;/*rem*/
    flex: 1;
    overflow: hidden;
  }
  .pay .order .order-content{
    padding-bottom: 90px;/*rem*/
  }
  .pay .order .order-header{
    display: flex;
    background-color: #ffffff;
    line-height: 90px;/*rem*/
    padding: 0 40px;/*rem*/
  }
  .pay .order .order-header p{
    font-size: 26px;/*px*/
    flex: 1;
    color: #000000;
  }
  .pay .order .order-header i{
    font-size: 24px;
  }


  .order-content .order-detail{
    margin-top: 14px;/*rem*/
    background-color: #ffffff;
    padding: 0 40px;/*rem*/
  }
  .order-detail .order-detail-header{
    display: flex;
    line-height: 90px;/*rem*/
    border-bottom: 1px solid #f5f5f5;
  }
  .order-detail .order-detail-header p{
    font-size: 26px;/*px*/
    color: #000000;
    margin-right: 10px;/*rem*/
  }
  .order-detail .order-detail-header i{
    font-size: 24px;
  }
  .order-list{

  }
  .order-list .list{
    display: flex;
    padding: 20px 0;/*rem*/
    border-bottom: 1px solid #f5f5f5;
  }
  .order-list .list .pic{
    height: 80px;/*rem*/
    width: 80px;/*rem*/
    margin-right: 20px;/*rem*/
  }
  .order-list .list .content{
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  .order-list .list .content p{
    font-size: 26px;/*px*/
    color: #000000;
  }
  .order-list .list .content .num-price{
    display: flex;
    font-size: 20px;/*px*/
    margin-top: 10px;/*rem*/
  }
  .order-list .list .content .num-price .num{
    flex: 1;
  }
  .order-list .list .content .num-price .price{
    font-size: 20px;/*px*/
    color: #ec6045;
  }

  .order-detail-footer{
    display: flex;
    align-items: center;
    height: 90px;/*rem*/
  }
  .order-detail-footer span:first-child{
    flex: 1;
  }
  .order-detail-footer .total{
    font-size: 26px;/*px*/
  }
  .order-detail-footer .total .totalprice{
    font-size: 20px;/*px*/
    color: #ec6146;
  }
  .order-detail-footer .but{
    color: #ffffff;
    background-color: #64d46f;
    font-size: 24px;/*px*/
    line-height: 60px;/*rem*/
    padding: 0 30px;/*rem*/
    border-radius: 5px;/*rem*/
    margin-left: 20px;/*rem*/
  }
</style>
